<template>
  <el-dialog
    v-model="showModel"
    width="1200px"
    title="商城页面选择"
    top="10vh"
    :close-on-click-modal="false"
    @closed="handleClose"
  >
    <div class="activity-href">
      <div class="content">
        <search-bar>
          <template #normal>
            <el-form-item label="页面名称">
              <el-input
                v-model="form.name"
                clearable
                placeholder="请输入页面名称"
              />
            </el-form-item>
          </template>
        </search-bar>

        <div class="list">
          <div
            v-for="item in list"
            class="card"
            :class="{
              'card-selected': item.id === selectedCard?.id
            }"
            @click="clickCard(item)"
          >
            <div class="img-wrapper">
              <img
                class="img"
                :src="PageHolder"
              >
            </div>
            <div class="text">
              <div class="line name">
                {{ item.name }}
              </div>
              <el-popover
                placement="top"
                :width="200"
                trigger="hover"
                :content="item.pageLink"
              >
                <template #reference>
                  <div class="line link">
                    {{ item.pageLink }}
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
        </div>

        <div class="pager">
          <el-pagination
            v-model:current-page="page.currentPage"
            layout="total, prev, pager, next"
            :total="total"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { debounce } from "@/utils";
import { pageList } from "@/api/actapp";
import PageHolder from "@/assets/activity/pageholder.png";
import { IMallPageListRow } from "@/api/modules/pointsMall";
import {Ref, WritableComputedRef} from "vue";
import {useMallConfig} from "@/views/pointsMall/compositions/useMallConfig";

const {mallConfig} = useMallConfig()

const handleClose = () => {
  // console.log("close")
  emits("close", null)
}

const props = defineProps<{
  modelValue: boolean;
}>()

const emits = defineEmits<{
  (e: "confirm", value: any): void;
  (e: "close", value: any): void;
  (e: "update:model-value", value: boolean): void;
}>()

const showModel:WritableComputedRef<boolean> = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits("update:model-value", newValue)
  }
})

const page = reactive({
  currentPage: 1,
  showCount: 20,
})
const total: Ref<number> = ref(0);

const form = reactive({
  name: "",
  relationId: mallConfig.value.id,
})
const list = ref([])
const getList = async () => {
  const rs = await pageList({ ...form, ...page })

  if (rs.code === 200) {
    list.value = rs.payload ?? []
    total.value = rs.page?.totalResult ?? 0;
  }
}

const debouncedSearch = debounce(() => {
  page.currentPage = 1;
  getList()
}, 700, false)

watch(() => form, debouncedSearch, {
  deep: true
})

watch(() => page, getList, {
  deep: true
})

const selectedCard = ref();
const clickCard = (item: IMallPageListRow) => {
  selectedCard.value = item
  emits("confirm", item);
}

onMounted(() => {
  getList();
})

</script>

<style scoped lang="scss">
:deep(.lr-content) {
  .main-panel {
    display: flex;
  }

  .side-panel {
    min-height: 500px;
  }
}

.content {
  display: flex;
  flex-direction: column;
}

.list {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;

  .card {
    cursor: pointer;
  }

  .card-active {
    background: var(--el-color-primary-light-9);
  }

  .card:hover {
    background: #EEE;
  }

  .card-selected {
    background: #EEE;
  }
}

.pager {
  display: flex;
  justify-content: flex-end;
}


.card {
  display: flex;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  font-size: 12px;
  padding: 10px;

  .img-wrapper {
    .img {
      max-width: 50px;

    }
  }

  .text {
    flex: 1;
    margin-left: 10px;

    .line {}

    .name {
      width: 140px;
      word-break: keep-all;
      white-space: nowrap;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
  }
}

.card:hover {
  background: #EEE;
}
</style>
